<template>
  <div class="study">
    <div class="introduce">
      该网站属于博主练手项目,简单的前后端（有手就行的那种）等待完善<br />
      技术栈 vue3 vuex vue-router element-plus... 后端node myslq2 websocket...
      <br />
      由于 界面功能大致差不多 就不想敲了懒 接口逻辑大致差不多
      <br />
      <span>
        前端功能包含
        文件上传(用户修改头像，用户文件上传),用户发布文章/问题进行悬赏,用户可以回答，文章作者可以选择采纳回答并支付对应积分,
        也对组件进行了封装为了代码复用,采用动态插槽预留位置,前端路由写死了没用动态配置...
        <br />用户可以在交友界面选择一个用户开始聊天基于websocket等等...<br />
        后端node 加上 mysql2 用户密码采用后端md5加密
        实现了文件上传下载即时通讯，CORS 开放，mysql 多表查询等等 一对多
        多对多等等
      </span>
      <br />
      下面就是简单的测试功能 没想好 放在哪里就放这啦
    </div>
    <video
      width="300"
      height="300"
      :poster="url"
      preload
      autoplay
      controls
      style="object-fit: fill"
      src="http://localhost:8081/cs.mp4/3/video"
    ></video>
    <el-upload
      class="upload-demo"
      :http-request="putvideo"
      :show-file-list="false"
    >
      <el-button type="primary">点击上传视频</el-button>
      <template #tip>
        <div class="el-upload__tip">
          视频文件别上传太大的！！！不然我服务器存不住 就 60g
        </div>
      </template>
    </el-upload>
  </div>
  <VueQrcode value="https://www.baidu.com" />
  <!-- 多文件上传 -->
  <div>
    <el-upload class="avatar-uploader" :http-request="putinMirror" multiple>
      <div>上传我的文件</div>
      <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
    </el-upload>
  </div>
  <div id="login_container"></div>
  <Zbutton />
  <div id="self_defined_element" class="self-defined-classname"></div>
  <div class="gg">
    <span> 公告 </span>
    <div class="gg1">
      <ul>
        <li>广告1</li>
        <li>广告2</li>
        <li>广告3</li>
        <li>广告4</li>
        <li>广告5</li>
        <li>广告6</li>
      </ul>
    </div>
  </div>
</template>

<script >
import { defineComponent, ref } from "vue";
import { useStore } from "vuex";
import VueQrcode from "vue-qrcode";
import { ElMessage } from "element-plus";

import LocalCache from "@/utils/cache";
// import "@/utils/wx";

import { zzyfile, redirect } from "../../../service/main";

import Zbutton from "@/components/Zbutton/src";

export default defineComponent({
  components: { VueQrcode, Zbutton },
  // directives: {
  //   scroll: {
  //     mounted: (el, binding) => {
  //       console.log(el, "hhhhhh", binding);
  //     },
  //   },
  // },
  setup() {
    const store = useStore();
    const url = require("../../../assets/images/bj.jpg");
    // const headers = {
    //   userid:
    // src="../../../assets/images/cs.mp4"
    // }

    const putvideo = (file) => {
      console.log(file, "file");
      let fileType = file.file.name.split(".");
      console.log(fileType, "fileType");
      if (fileType[fileType.length - 1] !== "mp4") {
        ElMessage.warning("文件格式错误，仅支持.mp4");
        return false;
      }
      // 校验文件大小是否满足
      let fileSize = file.file.size;
      //文件大小是否超出20G
      if (fileSize > 5 * 1024 * 1024 * 1024) {
        ElMessage.warning("上传文件大小不超过5G");
        return false;
      }
      const f = new FormData();
      f.append("video", file.file);
      f.append("userid", LocalCache.getCache("id"));
      store.dispatch("main/putvideo", f);
    };
    const putinMirror = (file) => {
      console.log("shangchuan ", file.file);
      const f = new FormData();
      f.append("file", file.file);
      console.log(f, "当前文件");
      zzyfile(f);
    };
    // const s = document.createElement("script");
    // s.type = "text/javascript";
    // // 微信提供的访问地址 或 自定义地址
    // s.src = "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js";
    // const wxElement = document.body.appendChild(s);
    // wxElement.onload = () => {
    //   const redirectUri = "http://192.168.0.102:8080";
    //   var obj = new window.WxLogin({
    //     self_redirect: true,
    //     id: "login_container",
    //     appid: "wx6765dff994da8914",
    //     scope: "snsapi_login",
    //     redirect_uri: redirectUri,
    //     state: "",
    //     style: "",
    //     href: "",
    //   });
    //   console.log(obj);
    // };
    //钉钉登录。
    const time = ref("");
    const zzys = document.createElement("script");
    zzys.type = "text/javascript";
    zzys.src =
      "https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js";
    zzys.onload = () => {
      console.log("dd脚本插入成功");

      window.DTFrameLogin(
        {
          id: "self_defined_element",
          width: 300,
          height: 300,
        },
        {
          redirect_uri: encodeURIComponent("http://192.168.124.3:8080/ddlogz"),
          client_id: "dingt4p4vkmz6cq9gikv",
          scope: "openid",
          response_type: "code",
          prompt: "consent",
        },
        async (loginResult) => {
          const { redirectUrl, authCode, state } = loginResult;
          console.log(authCode);
          // 这里可以直接进行重定向
          // window.location.href = redirectUrl;
          // 也可以在不跳转页面的情况下，使用code进行授权
          if (time.value !== null) {
            clearTimeout(time.value);
          }
          time.value = setTimeout(() => {
            //这里的this指向的是input
            console.log("authCode", authCode);
            redirect(authCode);
          }, 1000);
        },
        (errorMsg) => {
          // 这里一般需要展示登录失败的具体原因
          alert(`Login Error: ${errorMsg}`);
        }
      );
    };
    document.body.appendChild(zzys);
    return { url, putvideo, putinMirror };
  },
});
</script>

<style scoped lang="less">
.study {
  width: 1000px;
  margin: auto;
  .introduce {
    margin-top: 20px;
    font-size: 20px;
    text-align: center;
  }
}
.gg {
  height: 200px;
  position: relative;
  overflow: hidden;
  margin-bottom: 100px;
  > span {
    line-height: 40px;
  }
  .gg1 {
    position: absolute;
    top: 11px;
    left: 40px;
    height: 30px;
    overflow: hidden;
    > ul {
      animation: zzy 10s infinite;
      overflow: hidden;
      margin: 0;
      padding: 0;
      > li {
        height: 30px;
        list-style: none;
      }
    }
  }
  @keyframes zzy {
    0% {
      transform: translateY(0%);
    }
    100% {
      transform: translateY(-80%);
    }
  }
}
.self-defined-classname {
  width: 300px;
  height: 300px;
}
</style>
